<template>
	<view class="cart">
		<view class="heihei pos_r">
			<!-- 头部 -->
			<view class="box-header flex_center self_end">
				<image src="@/static/image/mine/mineBg.png" mode="widthFix"></image>
				<view class="top-Personal pos_a" :style="{
					paddingTop:menuInfo.statusBarHeight
				}">
					<view class="top_button flex_end flex_items pos_a"> </view>
					<view class="center-box flex_start flex_items pos_r" v-if="userInfo" @click="userSetup">
						<view class="center-img">
							<image mode="aspectFit" :src="userInfo.headUrl" />
						</view>
						<view class="center-fr">
							<p class="cf mt15 name">{{ userInfo.nickname }}</p>
							<p class="id_cardNum">
								{{ encryptionHash(userInfo.userId, 4, "****", 4) }}
							</p>
						</view>
					</view>
					<view class="center-box flex_start flex_items" @click="loginFun" v-else>
						<view class="center-img">
							<image mode="aspectFit" src="@/static/image/user_logo.png" />
						</view>
						<p class="cf ml15 name">点击登录账号</p>
					</view>
				</view>
			</view>
			<!-- 仓库展示 -->
			<view class="wallet_div" @click.stop="goBuy">
				<view class="wallet_div_fl">
					<p>作品仓库
						<image src="@/static/image/mine/arrow.png" mode="widthFix"></image>
					</p>
					<p>
						<span>{{ userInfo.objectCount }}</span>张
					</p>
				</view>
				<view class="img_box">
					<view>
						<image mode="widthFix" src="@/static/image/mine/imgBox.png" class="bg" />
						<image mode="aspectFill" :src="`https://oss.manguyishu.com/mangu/front/my_goodsCover.png`"
							class="img_icon" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getToken
	} from "@/utils/storage";
	import {
		encryptionHash
	} from "@/utils/validate";

	export default {
		data() {
			return {
				encryptionHash,
				menuInfo: null, //状态栏高度
				userInfo: null, //用户信息

			};
		},
		computed: {},
		created() {

		},
		onShow() {
			// this.menuInfo = this.$store.getters["sys/getMenuInfo"];
			// console.log(this.menuInfo)
			// if (!getToken()) {
			// 	this.userInfo = null;
			// 	return false;
			// }
			// this.getMemberDetail();
		},
		methods: {
			// 获取用户信息
			async getMemberDetail() {
				await this.$store.dispatch("user/GET_USER_INFO");
				await this.$nextTick();
				this.userInfo = this.$store.getters["user/getUserInfo"];
			},
			loginFun() {
				this.$functions.goLogin();
			},
			goBuy() {
				uni.switchTab({
					url: '/pages/home/buy'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.heihei {
		min-height: calc(100vh - 120rpx);
		padding-bottom: 120rpx;
		box-sizing: border-box;
	}

	.box-header {
		position: relative;

		&>image {
			width: 100%;
		}

		.set_icon {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 32rpx;
			top: 88rpx;
		}
	}

	.top-Personal {
		width: 100%;
		left: 0;
		right: 0;
		top: 0;

		.top_button {
			top: 34rpx;
			right: 24rpx;

			.set_button {
				width: 48rpx;
				z-index: 111;
				margin-left: 60rpx;

				&:nth-child(1) {
					margin: 0;
				}
			}
		}
	}

	.center-box {
		padding: 98rpx 0 40rpx 48rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;

		.center-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			font-size: 0;
			border: 4rpx solid #ffffff;

			image {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 50%;
				object-fit: cover;
			}
		}

		.center-fr {
			flex: 1;
			padding-left: 24rpx;

			.id_cardNum {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #a3a3a3;
				line-height: 40rpx;
				margin-top: 12rpx;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 40rpx;
				color: #ffffff;
				line-height: 56rpx;
				text-align: left;
			}

			.grade-lable {
				margin-top: 12rpx;

				&>view {
					font-family: PingFang SC-Regular;
					font-weight: 400;
					color: #26272c;
					font-size: 20rpx;
					margin-right: 8rpx;
					padding: 0 8rpx !important;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 10rpx;
					border: 1rpx solid #26272c;

					&:last-child {
						margin: 0;
					}
				}
			}
		}

		.mine_top_img {
			width: 276rpx;
			right: 0;
			top: 24rpx;
			z-index: 11;
		}
	}

	// 仓库
	.wallet_div {
		margin: -80rpx 24rpx 24rpx;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 38rpx 0 38rpx 24rpx;
		position: relative;

		.wallet_div_fl {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #a3a3a3;
			line-height: 34rpx;

			&>p {
				&>span {
					font-family: DIN, DIN-Bold;
					font-weight: 500;
					font-size: 44rpx;
					color: #222222;
					line-height: 54rpx;
					margin-right: 4rpx;
				}

				&>image {
					width: 12rpx;
					margin-left: 8rpx;
				}
			}

			&>p+p {
				margin-top: 16rpx;
			}
		}

		.img_box {
			width: 220rpx;
			height: 212rpx;
			position: absolute;
			overflow: hidden;
			right: 38rpx;
			bottom: 0;

			&>view {
				position: relative;
				height: 244rpx;
				transform: rotate(8deg);
			}

			&>view>image {
				position: absolute;
				width: 100%;
				height: 244rpx;
			}

			.bg {
				z-index: 2;
			}

			.img_icon {
				z-index: 1;
				position: absolute;
				// transform: translate3d(-50%, 0, 0) skewX(-10deg);
				// transform: translate3d(-50%, 0, 0) rotate(7deg);
				width: 164rpx;
				height: 204rpx;
				bottom: 12rpx;
				height: 208rpx;
				object-fit: cover;
				transform: translate(-50%, 0%);
				left: 50%;
			}
		}

	}
</style>